<template>
  <div class="dashboard-container">
    <div class="main">
      <el-row class="divStatic" type="flex">
        <el-col class="divLeft" :span="18" style="margin-right: 30px">
          <div class="banner">
            <img
              src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
              alt=""
              class="img-left"
            >
            <img src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png" alt="" class="img-middle">
            <img
              src="	http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
              alt=""
              class="img-right"
            >
            <p class="user-title">仓储管理员</p>
            <p class="subject-title">我不是为了输赢，我就是认真！</p>
            <p class="subject-author">—— 罗永浩</p>
            <div class="site">
              <p class="site-detial">北京总仓</p>
            </div>
          </div>
          <div class="backlog">
            <div class="subject">待办信息</div>
            <div class="item-list">
              <el-row style="margin-left: -15px; margin-right: -15px">
                <el-col
                  :span="8"
                  style="padding-left: 15px; padding-right: 15px"
                >
                  <a href="#/manage-storage-in/list-in/list">
                    <div class="backlog-item">
                      <div class="icon" style="background: rgb(0, 118, 255)">
                        <i />
                      </div>
                      <div class="title">入库单</div>
                      <div class="bottom">
                        <span class="spanlabel">新增</span>
                        <span class="spanValue">2</span>
                        <span class="spanlabel">待审核</span>
                        <span
                          class="spanValue"
                          style="color: rgb(0, 118, 255)"
                        >2</span>
                      </div>
                    </div>
                  </a>
                </el-col>
                <el-col :span="8" />
                <el-col :span="8" />
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col class="divRight" :span="6">
          <div class="notes">
            <div class="subject">通知/公告</div>
            <div class="item">
              <div class="hr" />
              <div class="notify">紧急盘点通知</div>
              <div class="time">2020.12.30 18:23:14</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.banner {
  position: relative;
  width: 100%;
  height: 148px;
  background: linear-gradient(270deg, #ffc771, #ffa634);
  box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
  border-radius: 12px;
  .img-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 148px;
  }
  .img-right {
    position: absolute;
    top: 0;
    right: 0;
    height: 148px;
  }
  .img-middle {
    position: absolute;
    top: 31px;
    left: 43px;
    height: 62px;
  }
  .user-title {
    position: absolute;
    left: 36px;
    bottom: 10px;
    font-size: 16px;
    // font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #332929;
    line-height: 22px;
  }
  .subject-title {
    position: absolute;
    // font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    line-height: 25px;
    top: 36px;
    left: 200px;
    font-size: 18px;
  }
  .subject-author {
    position: absolute;
    // font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    line-height: 25px;
    top: 76px;
    left: 400px;
    font-size: 16px;
  }
  .site {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 147px;
    height: 40px;
    background: #f8f5f5;
    border-radius: 6px;
    opacity: 0.79;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    .site-detial {
      font-size: 14px;
      font-weight: 500;
      color: #332929;
    }
  }
}
.backlog {
  width: 100%;
  height: 282px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;
  .subject {
    font-size: 16px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
  .item-list {
    margin-top: 19px;
    .backlog-item {
      position: relative;
      height: 186px;
      background: #fbf7f7;
      border-radius: 8px;
      padding: 20px;
      cursor: pointer;
    }
  }
}
.bottom {
  position: absolute;
  bottom: 20px;

  .spanlabel {
    font-size: 14px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #887e7e;
    margin-right: 10px;
    vertical-align: super;
  }
  .spanValue {
    font-size: 36px;
    // font-family: DIN-Medium, DIN;
    font-weight: 500;
    color: #332929;
    margin-right: 20px;
  }
}
.icon {
  width: 49px;
  height: 49px;
  background: #0076ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.title {
  position: absolute;
  top: 34px;
  left: 85px;
  font-size: 16px;
  // font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #332929;
  line-height: 22px;
}

.notes {
  width: 261px;
  height: 451px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 30px;
  .subject {
    font-size: 16px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
  .item {
    margin-top: 15px;
    .hr {
      width: 201px;
      height: 1px;
      background-color: #f5efee;
    }

    .time {
      width: 115px;
      height: 17px;
      font-size: 12px;
      // font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #887e7e;
      line-height: 17px;
      margin-top: 10px;
    }
  }
}
.notify {
  width: 195px;
  height: 18px;
  font-size: 13px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #332929;
  line-height: 18px;
  margin-top: 15px;
}
</style>
